<!-- 采用html5  -->
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <!-- 页面显示适应移动设备 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <title>我的APP</title>
    <link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">
    <style>
        /*元素选择器*/

        html {
            height: 100%;
        }

        body {
            height: 100%;
            
            padding: 0px;
            /*内边距*/

            margin: 0px;
            /*外边距*/
        }
    </style>


</head>


<body>

    <!-- div ：矩形区域 -->
    <div id="app">

        <wv-header :fixed="false" title="掌上办公">
            <div slot="left">
                <i class="fa fa-times-circle"></i>
            </div>

            <div slot="right">
                <i class="fa fa-user"></i> {{currUserID}}
            </div>


        </wv-header>


        <div v-if="active==1">

            <wv-grid>

                <wv-grid-item url="dep.html">
                    <img src="resources\images\work2.jpg" slot="icon">
                    <span slot="label">部门管理</span>
                </wv-grid-item>

                <wv-grid-item url="emp.html">
                    <img src="resources\images\work2.jpg" slot="icon">
                    <span slot="label">员工管理</span>
                </wv-grid-item>

                <wv-grid-item>
                    <img src="resources\images\leave.jpg" slot="icon">
                    <span slot="label">写假条</span>
                </wv-grid-item>
                <wv-grid-item>
                    <img src="resources\images\shenpi2.jpg" slot="icon">
                    <span slot="label">审批假条</span>
                </wv-grid-item>

                <wv-grid-item>
                    <img src="resources\images\cundang.jpg" slot="icon">
                    <span slot="label">备案假条</span>
                </wv-grid-item>


            </wv-grid>

        </div>

        <div v-if="active==2">
            <wv-grid>

                <wv-grid-item>
                    <img src="resources\images\work2.jpg" slot="icon">
                    <span slot="label">密码修改</span>
                </wv-grid-item>

                <wv-grid-item>
                    <img src="resources\images\work2.jpg" slot="icon">
                    <span slot="label">安全退出</span>
                </wv-grid-item>


            </wv-grid>
        </div>


        <wv-tabbar>

            <wv-tabbar-item @click="active=1" :is-on="active==1">
                <span slot="icon">
                    <img class="weui-tabbar__icon" src="resources\images\work.png" slot="icon">
                </span>
                工作
            </wv-tabbar-item>


            <wv-tabbar-item @click="active=2" :is-on="active==2">
                <img class="weui-tabbar__icon" src="resources\images\my.png" slot="icon">
                我的
            </wv-tabbar-item>

        </wv-tabbar>

    </div>

</body>

<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
    //Vue对象的作用就是渲染界面,需要绑定一个元素
    new Vue({
        el: '#app',
        data: {
            active: 1,//当前选中选项的编号
            currUserID:''
        },
        methods: {

        },

        //该函数页面加载完成时执行        
        mounted(){
            
            console.log(Serv.baseURL());

            //从服务器加载文本信息（获取帐户编号）
            Serv.loadText({url:'/currUserID.jsp'},(data)=>{
                //参数data即为回应数据(帐户编号)
                this.currUserID=data;
            });
        }
    });


</script>


</html>